<!--
  App.vue - Vue应用的根组件
  
  这是整个应用的根组件，作为所有其他组件的容器
  负责应用的整体布局和全局样式设置
  所有的子组件都会在这个组件内部渲染
-->

<template>
    <!-- 应用的根容器，id="app"与main.js中的挂载点对应 -->
    <div id="app">
        <!-- 应用标题 -->
        <h1>My Todo App!</h1>
        
        <!-- 引入TodoList组件，这是应用的主要功能组件 -->
        <!-- 使用自闭合标签的形式，因为不需要传递插槽内容 -->
        <TodoList />
    </div>
</template>

<script>
/**
 * 脚本部分 - 组件的逻辑代码
 * 负责组件的数据、方法、生命周期等
 */

// 导入TodoList组件
// 使用相对路径导入，webpack会自动解析.vue扩展名
import TodoList from "./components/TodoList.vue";

// 导出组件配置对象
export default {
    // 组件名称（可选），主要用于调试和Vue DevTools
    name: 'App',
    
    // 注册子组件
    // 在这里注册的组件可以在template中直接使用
    components: {
        // ES6简写语法，等同于 TodoList: TodoList
        // 将导入的TodoList组件注册为可用的子组件
        TodoList,
    },
    
    // 注意：这个根组件没有定义data、methods等选项
    // 因为它只是作为容器，主要的业务逻辑都在TodoList组件中
};
</script>

<style lang="scss">
/**
 * 样式部分 - 全局样式和根组件样式
 * 使用Sass预处理器，支持变量、嵌套等高级特性
 * 注意：这里没有使用scoped，所以样式是全局的
 */

// 导入全局变量文件
// 这样就可以在当前文件中使用$vue-blue等变量
@import "./variables.scss";

// CSS重置 - 设置所有元素使用border-box盒模型
// 这样padding和border会被包含在元素的总宽度内
*,
*::before,
*::after {
    box-sizing: border-box;
}

// 应用根容器的样式
#app {
    // 限制最大宽度，确保在大屏幕上不会过宽
    max-width: 400px;
    
    // 水平居中显示
    margin: 0 auto;
    
    // 设置行高，提升文本可读性
    line-height: 1.4;
    
    // 字体栈，优先使用Avenir，依次降级
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    
    // WebKit浏览器的字体平滑渲染
    -webkit-font-smoothing: antialiased;
    
    // Firefox浏览器的字体平滑渲染
    -moz-osx-font-smoothing: grayscale;
    
    // 使用Vue主题色作为文本颜色
    color: $vue-blue;
}

// 标题样式
h1 {
    // 文本居中对齐
    text-align: center;
}
</style>
